/** @type {HTMLDivElement} */
const thumbBar = document.querySelector('.thumb-bar');
/** @type {HTMLDivElement} */
const overlay = document.querySelector('.overlay');
/** @type {HTMLImageElement} */
const displayedImg = document.querySelector('.displayed-img');
/** @type {HTMLInputElement} */
const button = document.querySelector('.dark');
let darked = false;
for (let i = 0; i < 5; i++) 
{
    let imgSrc = 'images/pic/' + (i + 1) + '.jpg';
    const img = document.createElement('img'); 
    img.style.width='20%';
    img.style.height='20%' ;
    img.src = imgSrc;  
    thumbBar.appendChild(img);
}
thumbBar.onclick = function (e) {
    /** @type {HTMLImageElement} */
    const eventImg = e.target;
    console.log(e.target);  
    displayedImg.src = eventImg.src;
};
button.onclick = function (e) {
    if (darked) {    
        button.textContent = '变暗';    
        darked = false;    
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
      } else {    
          button.textContent = '变亮';    
          darked = true;    
          overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';  
        }
    };
   
    
    
